<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>新版导航栏</title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <link rel="stylesheet" href="/static/v2/css/base/coach.css">
        <link rel="stylesheet" type="text/css" href="/static/v2/css/base/login.css"/>

        <style>
            .layui-container {
                width: 100%;
                padding: 0 10px;
            }

            .marquee {
                display: none;
                width: 100%;
                height: 35px;
                line-height: 35px;
                align-items: center;
                color: #3A3A3A;
                background-color: #b3effe;
                box-sizing: border-box;
                text-align: center;
            }


        </style>
    </head>
    <body>

        <div class="layui-container">
            <div class="layui-row">
                <div class="marquee">
                    <p style="">
                        Hao-Tool Design By @polices on http://lymtr.cn
                    </p>
                </div>
            </div>
            <input type="hidden" th:value="${modelIds}" name="modelIds">
            <div class="layui-row" id="view" style="margin:10px auto">
            </div>
            <div class="layui-row" style="margin:10px auto">
            </div>
        </div>
        <div id="loginView"></div>

        <div class="truck-wrapper" id="show-loading">
            <div class="truck">
                <div class="truck-container">
                    <img src="http://i.lymtr.cn/cmhi/logo/3.2.png" width="100%">
                </div>
                <div class="glases"></div>
                <div class="bonet"></div>
                <div class="base"></div>
                <div class="base-aux"></div>
                <div class="wheel-back"></div>
                <div class="wheel-front"></div>
                <div class="smoke"></div>
            </div>
        </div>

        <script id="demo" type="text/html">
            {{# layui.each(d, function(index, item){ }}
            <fieldset class="layui-elem-field">
                <legend>
                    <span class="layui-badge {{item.badgeClass}}">{{item.modelName}}</span>
                </legend>
                <div class="layui-field-box">
                    {{# layui.each(item.infoList, function(index, item){ }}
                    <button class="layui-btn layui-btn-lg btn-link {{item.btnClass}}"
                            data-url="{{item.linkUrl}}" data-id="{{item.id}}"
                            data-userauth="{{item.userAuth}}"
                            data-navitype="{{item.navigationType}}"
                            style="margin: 5px">
                        {{item.linkName}}
                    </button>
                    {{# }); }}
                </div>
            </fieldset>
            {{# }); }}
        </script>

        <script id="loginTpl" type="text/html">
            <!--弹窗开始-->
            <div class="tan">
                <div class="box">
                    <div class="form">
                        <span class="close">✖</span>
                        <h3>欢迎来到 HAO-TOOL</h3>
                        {{# if(d.status == 1){ }}
                        <p class="desc">个人信息</p>
                        <form action="" onSubmit="return false;">
                            <input type="text" name="userName" placeholder="USER: {{d.auth.userName}}" disabled/>
                            <input type="password" name="loginTime" placeholder="TIME: {{d.auth.updateTime}}" disabled/>
                            <div class="error"></div>
                            <input type="submit" id="logout" value="退出">
                        </form>
                        {{# }else { }}
                        <p class="desc">登录后可查看更多个人资源</p>
                        <form action="" onSubmit="return false;">
                            <input type="text" name="name" id="name" placeholder="请输入用户名"/>
                            <input type="password" name="password" id="passw" placeholder="请输入密码"/>
                            <div class="error"></div>
                            <input type="submit" id="Submit" value="登录">
                        </form>
                        {{# } }}

                        <p class="reg">
                            <a href="#"></a>
                            <a href="#"></a>
                        </p>
                    </div>
                </div>
            </div>
        </script>
        <script src="/static/layui/layui.js"></script>
        <script src="/static/v1/js/clipboard.min.js"></script>
        <script src="/static/v1/js/base/login.js"></script>

        <script>
            //一般直接写在一个js文件中
            layui.use(['layer', 'form', 'laytpl', 'util', 'element'], function () {
                var userName = "";
                var layer = layui.layer
                    , form = layui.form, laytpl = layui.laytpl;
                var $ = layui.$;
                var util = layui.util;
                var element = layui.element;
                var logStatus = 0;

                var clipboard = new ClipboardJS('.layui-btn');
                clipboard.on('success', function (e) {
                    layer.msg("信息已经复制到剪切板", {time: 1000});
                });
                var modelIds = $("[name=modelIds]").val();
                $.get("/rest/navigation/list/" + modelIds + "?userName=" + userName, function (data) {
                    console.log(data);
                    if (data.code == '200') {
                        logStatus = data.status;
                        console.log(data.data);
                        writeNavigationList(data.data)
                        writeLoginInfo(data);
                    }
                });

                function writeNavigationList(v) {
                    var getTpl = demo.innerHTML
                        , view = document.getElementById('view');
                    laytpl(getTpl).render(v, function (html) {
                        view.innerHTML = html;
                        $(".layui-btn").each(function () {
                            var this_ = $(this);
                            if (this_.hasClass("btn-copy")) {
                                this_.html(this_.html() + "<i class=\"layui-icon layui-icon-share\"></i>");
                                this_.attr("data-clipboard-text", this_.attr("data-url"))
                            }
                        });
                        $("#show-loading").hide();
                        $(".vueBox").show();
                    });
                }

                function writeLoginInfo(v) {
                    var loginTpl2 = loginTpl.innerHTML
                        , logView2 = document.getElementById('loginView');
                    laytpl(loginTpl2).render(v, function (html) {
                        logView2.innerHTML = html;
                    })
                }

                $("#view").on('click', ".btn-link", function () {
                    var linkUrl = $(this).attr("data-url");
                    var linkId = $(this).attr("data-id");
                    var naviType = $(this).attr("data-navitype");
                    var userAuth = $(this).attr("data-userauth");
                    console.log(userAuth);

                    if (linkUrl == "") {
                        layer.msg("该导航信息暂未使用");
                    } else if ($(this).hasClass("layui-btn-disabled")) {
                        layer.msg("该导航信息暂未使用");
                    } else if ($(this).hasClass("auth-login")) {
                        layer.msg("该导航网址需要登录才能查看");
                    } else {
                        if (($(this).hasClass("btn-copy"))) {

                        }
                        if (naviType == 'URL') {
                            window.open(linkUrl, "_blank");
                        } else if (naviType == 'API') {
                            layer.open({
                                closeBtn: "1",
                                title: '访问地址'
                                , content: linkUrl
                            });

                        }

                        var reqData = {"linkId": linkId};
                        $.post("/rest/navigation/addRecord", reqData,
                            function (data) {
                            });


                    }
                })
                ;
                //执行
                util.fixbar({
                    bar1: true,
                    bar2: '&#xe66f;',
                    click: function (type) {
                        if (type === 'bar1') {
                            layer.msg("欢迎使用hao-tool，即将返回主页导航")
                            setTimeout(function () {
                                window.location = "/";
                            }, 2000)
                        } else if (type === 'bar2') {
                            $('.tan').show();

                        }
                    }
                });
            })
            ;
        </script>
    </body>
</html>
